<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // $.ajax({
        //     url: 'https://jsonplaceholder.typicode.com/todos',
        //     type: 'POST',
        //     dataType: 'JSON',
        //     data: {
                
        //     },
        //     success: function(data){
        //         console.log(data);
        //     }
        // });

        // $post('https://jsonplaceholder.typicode.com/todos', {data}, function(data){
        //     console.log(data);
        // })

        // $get('https://jsonplaceholder.typicode.com/todos', function(data){
        //     console.log(data);
        // })



        // 这个是个对象，方法太老了，可以用模块化的方式
        // var $ = {
        //     ajax: function(opt){
        //         var url = opt.url;
        //         console.log('ajax');
        //     },
        //     post: function(){
        //         console.log('post');
        //     },
        //     get: function(){
        //         console.log('get');
        //     }
        // }
        // $.ajax({
        //     url: 'https://www.baidu.com'
        // });
        
        // 模块化
        var $ = (function(){
            var o = window.XMLHttpRequest ?
                    new XMLHttpRequest : 
                    new ActiveXObject('Microsoft.XMLHTTP');
            console.log(o);
            if (!o){
                throw new Error('你的浏览器不支持异步发起http请求')
            }
            function _doAjax(opt){
                var opt = opt || {},
                    type = (opt.type || 'GET').toUpperCase(),
                    async = opt.async || true,
                    url = opt.url,
                    data = opt.data || null,
                    error = opt.error || function(){},
                    success = opt.success || function() {},
                    complete = opt.complete || function(){};
                if(!url){
                    throw new Error('请输入URL')
                }

                o.open(type, url ,async);
                // &&前面条件为真就会往后面走
                type === 'POST' && o.setRequestHeader('Content-type', 'application/x-www.form-urlencoded');
                // 判断type是否为get，是get那么我send空对象，不是的话，把对象给formDates格式化下
                o.send(type === 'GET' ? null : formDatas(data));

                o.onreadystatechange = function(){
                    // console.log('1');
                    if(o.readyState === 4 && o.status === 200){
                        success(JSON.parse(o.responseText));
                    }
                    if(o.status === 404){
                        error()
                    }
                    complete()
                }
            }
            function formDatas(obj){
                var str = ''
                for(var key in obj){
                    str += key + '=' + obj[key] + '&'
                }
                return str.replace(/&$/, '')
            }
            // 注意opt是个对象
            return{
                ajax: function(opt){
                    _doAjax(opt)
                },
                post: function(url, data, callback){
                    // console.log('post');
                    _doAjax({
                        type: "POST",
                        url: url,
                        data: data,
                        success: callback
                    })
                },
                get: function(url, callback){
                    // console.log('get');
                    _doAjax({
                        type: 'GET',
                        url: url,
                        success: callback
                    })
                }
            }
        })();


        // $.ajax({
        //     type: 'POST',
        //     url: 'https://jsonplaceholder.typicode.com/todos',
        //     data: {
        //         title: 'foo1',
        //         body: 'ba1r',
        //         userId: 100
        //     },
        //     success: function (data) {
        //         console.log(data);
        //     }
        // })
        

        $.get('https://jsonplaceholder.typicode.com/todos', function(data){
            console.log(data);
        })
    </script>
</body>
</html>